<template>
  <div>
    <!-- 按钮 -->
    <div class="horizontal-btn-container">
      <div>
        <Button @click="showModal" type="primary" class="horizontal-btn"
        >添加</Button
      >
      <Button @click="clearData" type="warning" class="horizontal-btn"
        >清除表格数据</Button
      >
      </div>
      <div>
        <Button type="success" class="horizontal-btn">生成excl</Button>
        <Button type="error" class="horizontal-btn">生成pdf</Button>
        <Button type="primary" class="horizontal-btn">生成word</Button>
      </div>
    </div>
    <div class="horizontal-table-container">
      <Table
         show-summary
        :height="pageHeight"
        :columns="columns"
        :data="data"
        class="horizontal-table"
      ></Table>
    </div>
  <div class="modal">
  <Modal
      :mask-closable="false"
      :width="modelWidth"
      v-model="modalStatus"
      title="添加报价单数据"
      class="modelDom"
    >
      <div
        v-for="(item, index) in forms"
        :key="index"
        style="display: flex; align-items: center"
      >
        <Form ref="formData" :model="item" inline>
          <FormItem>
            <Input
              type="text"
              :style="{ width: modelWidth*0.15 + 'px' }"
              v-model="item.name"
              placeholder="时花名称"
            >
            </Input>
          </FormItem>
          <FormItem>
            <Input
              type="text"
              :style="{ width: modelWidth*0.15 + 'px' }"
              v-model="item.unit"
              placeholder="（株/盆/棵）"
            >
            </Input>
          </FormItem>
          <FormItem>
            <Input
              type="number"
              :style="{ width: modelWidth*0.15 + 'px' }"
              v-model="item.number"
              placeholder="数量"
            >
            </Input>
          </FormItem>
          <FormItem>
            <Input
              type="number"
              :style="{ width: modelWidth*0.15 + 'px' }"
              v-model="item.price"
              placeholder="单价(元)"
            >
            </Input>
          </FormItem>
          <FormItem>
            <Input
              type="text"
              :style="{ width: modelWidth*0.15 + 'px' }"
              v-model="item.mask"
              placeholder="备注说明"
            >
            </Input>
          </FormItem>
          <FormItem>
            <Button type="error" @click="delOneNode(index)">删除</Button>
          </FormItem>
        </Form>
      </div>
      <template #header>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-right: 40px;
          "
        >
          <div>
            <h3>
              添加报价品种数据
              &nbsp;
              一共 <span style="color: #ed4014;">{{ forms.length }}</span> 条时花报价
              &nbsp;
              品种分别是： <Tag v-for="(item,index) in forms" :key="index" type="border" :color="typeTexts[index]">{{ item.name || '-' }}</Tag>
            </h3>
          </div>
          <div>
            <Button
              style="margin-right: 10px"
              type="primary"
              icon="md-add"
              @click="addNode()"
              >增加时花</Button
            >
          </div>
        </div>
      </template>
      <div slot="footer">
      <Button type="text" @click="cancel">取消</Button>
      <Button type="primary" @click="ok">确定</Button>
    </div>
    </Modal>
</div>
  </div>
</template>

<script>
/*
 *@Date: 2023-10-19 15:45:51
 *@Description: 模块描述
 */
import tableCloums from "./tableCloums"
export default {
  name: "",
  data() {
    return {
      formData: {},
      forms: [], // 存储表单数据
      data: [],
      pageHeight: 500,
      modalStatus: false,
      modelWidth:1080,
      modelHeight:900,
      typeTexts:{
        [0]:'primary',
        [1]:'success',
        [2]:'error',
        [3]:'warning',
        [4]:'magenta',
        [5]:'red',
        [6]:'valcano',
        [7]:'organge',
        [8]:'gold',
        [9]:'lime',
        [10]:'green',
        [11]:'cyan',
        [12]:'bule',
        [13]:'geekblue',
        [14]:'purple',
      }
    }
  },
  created() {
    this.columns = tableCloums
  },
  mounted() {
    this.updateScreenHeight()
    // 在窗口尺寸改变时监听事件
    window.addEventListener("resize", this.updateScreenHeight)
  },
  methods: {
    showModal() {
      this.modalStatus = !this.modalStatus
    },
    clearData(){
      this.data=[]
    },
    delOneNode(index){
      this.forms.splice(index,1)
    },
    ok() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否添加这些数据到表格中，确定之后你可以在表格中查看数据，确认无误后点击生成对应的表格",
        onOk: () => {
          if(this.forms.length===0){
            return this.$Message.error('您还没有添加任何数据哦！')
          }
          this.data=this.forms.map(item=>{
            return {
              name:item.name,
              unit:item.unit,
              number:Number(item.number),
              price:Number(item.price),
              moeny:Number(item.number)*Number(item.price),
              mask:item.mask
            }
          })
          this.modalStatus=false
          this.forms=[]
        },
        onCancel: () => {
          this.$Message.info("取消了")
        },
      })
    },
    cancel() {
      this.modalStatus=false;
      this.forms=[]
    },
    addNode() {
      this.forms.push({
        name: "",
        unit: "",
        number: "",
        price: "",
        moeny: "",
        mask: "",
      })
    },
    delNode() {
      this.forms.pop()
    },
    // 获取页面高度
    getPageHeight() {
      // 获取初始的屏幕可视高度
      let screenHeight = window.innerHeight
      let screenWeidth = window.innerWidth
      console.log("screenHeight -----> ", screenHeight, screenWeidth)
    },

    // 更新屏幕可视高度的函数
    updateScreenHeight() {
      // 获取按钮栏高度
      const btnHeight = document.querySelector(
        ".horizontal-btn-container"
      ).clientHeight
      let screenHeight = window.innerHeight
      let screenWeidth = window.innerWidth
      this.pageHeight = screenWeidth - btnHeight

      const html = document.getElementsByTagName("html")[0]
      const width = html.clientWidth
      const height = html.clientHeight
      // 获取所有的inpu输入框

      if (width > height) {
        this.pageHeight = screenHeight
        this.modelWidth = width * 0.9
        console.log("this.pageHeight -----> ", this.pageHeight)
      } else {
        console.log("this.pageHeight -----> ", this.pageHeight)
        this.modelWidth = height * 0.9
        this.pageHeight = screenWeidth

      }
    },
  },
}
</script>

<style lang="less" scoped>
.horizontal-table-container {
  height: 100vh;
  overflow: scroll;
}
.horizontal-btn-container {
  display: flex;
  justify-content: space-between;
  .horizontal-btn {
    margin: 10px;
  }
}
/deep/ .ivu-modal {
  top: 10px;
}
</style>

